<template>
  <page-view :title="title">
    <a-card :bordered="false">
      <detail-list title="退款申请">
        <detail-list-item term="取货单号">1000000000</detail-list-item>
        <detail-list-item term="状态">已取货</detail-list-item>
        <detail-list-item term="销售单号">1234123421</detail-list-item>
        <detail-list-item term="子订单">3214321432</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="用户信息">
        <detail-list-item term="用户姓名">付小小</detail-list-item>
        <detail-list-item term="联系电话">18100000000</detail-list-item>
        <detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
        <detail-list-item term="取货地址">浙江省杭州市西湖区万塘路18号</detail-list-item>
        <detail-list-item term="备注">无</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />

      <div class="title">退货商品</div>
      <s-table
        style="margin-bottom: 24px"
        row-key="id"
        :columns="goodsColumns"
        :data="loadGoodsData"
      ></s-table>

      <div class="title">退货进度</div>
      <s-table
        style="margin-bottom: 24px"
        row-key="key"
        :columns="scheduleColumns"
        :data="loadScheduleData"
      >
        <template slot="status" slot-scope="status">
          <a-badge :status="status" :text="status | statusFilter" />
        </template>
      </s-table>
    </a-card>
  </page-view>
</template>

<script>
import { PageView } from '@/layouts'
import { STable } from '@/components'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item

export default {
    components: {
        PageView,
        DetailList,
        DetailListItem,
        STable
    },
    data() {
        return {
            goodsColumns: [
                {
                    title: '商品编号',
                    dataIndex: 'id',
                    key: 'id'
                },
                {
                    title: '商品名称',
                    dataIndex: 'name',
                    key: 'name'
                },
                {
                    title: '商品条码',
                    dataIndex: 'barcode',
                    key: 'barcode'
                },
                {
                    title: '单价',
                    dataIndex: 'price',
                    key: 'price',
                    align: 'right'
                },
                {
                    title: '数量（件）',
                    dataIndex: 'num',
                    key: 'num',
                    align: 'right'
                },
                {
                    title: '金额',
                    dataIndex: 'amount',
                    key: 'amount',
                    align: 'right'
                }
            ],
            // 加载数据方法 必须为 Promise 对象
            loadGoodsData: () => {
                return new Promise(resolve => {
                    resolve({
                        data: [
                            {
                                id: '1234561',
                                name: '矿泉水 550ml',
                                barcode: '12421432143214321',
                                price: '2.00',
                                num: '1',
                                amount: '2.00'
                            },
                            {
                                id: '1234562',
                                name: '凉茶 300ml',
                                barcode: '12421432143214322',
                                price: '3.00',
                                num: '2',
                                amount: '6.00'
                            },
                            {
                                id: '1234563',
                                name: '好吃的薯片',
                                barcode: '12421432143214323',
                                price: '7.00',
                                num: '4',
                                amount: '28.00'
                            },
                            {
                                id: '1234564',
                                name: '特别好吃的蛋卷',
                                barcode: '12421432143214324',
                                price: '8.50',
                                num: '3',
                                amount: '25.50'
                            }
                        ],
                        pageSize: 10,
                        pageNo: 1,
                        totalPage: 1,
                        totalCount: 10
                    })
                }).then(res => {
                    return res
                })
            },

            scheduleColumns: [
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time'
                },
                {
                    title: '当前进度',
                    dataIndex: 'rate',
                    key: 'rate'
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    scopedSlots: { customRender: 'status' }
                },
                {
                    title: '操作员ID',
                    dataIndex: 'operator',
                    key: 'operator'
                },
                {
                    title: '耗时',
                    dataIndex: 'cost',
                    key: 'cost'
                }
            ],
            loadScheduleData: () => {
                return new Promise(resolve => {
                    resolve({
                        data: [
                            {
                                key: '1',
                                time: '2017-10-01 14:10',
                                rate: '联系客户',
                                status: 'processing',
                                operator: '取货员 ID1234',
                                cost: '5mins'
                            },
                            {
                                key: '2',
                                time: '2017-10-01 14:05',
                                rate: '取货员出发',
                                status: 'success',
                                operator: '取货员 ID1234',
                                cost: '1h'
                            },
                            {
                                key: '3',
                                time: '2017-10-01 13:05',
                                rate: '取货员接单',
                                status: 'success',
                                operator: '取货员 ID1234',
                                cost: '5mins'
                            },
                            {
                                key: '4',
                                time: '2017-10-01 13:00',
                                rate: '申请审批通过',
                                status: 'success',
                                operator: '系统',
                                cost: '1h'
                            },
                            {
                                key: '5',
                                time: '2017-10-01 12:00',
                                rate: '发起退货申请',
                                status: 'success',
                                operator: '用户',
                                cost: '5mins'
                            }
                        ],
                        pageSize: 10,
                        pageNo: 1,
                        totalPage: 1,
                        totalCount: 10
                    })
                }).then(res => {
                    return res
                })
            }
        }
    },
    filters: {
        statusFilter(status) {
            const statusMap = {
                processing: '进行中',
                success: '完成',
                failed: '失败'
            }
            return statusMap[status]
        }
    },
    computed: {
        title() {
            return this.$route.meta.title
        }
    }
}
</script>

<style lang="less" scoped>
.title {
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}
</style>
